<template>
  <div class="searchF">
    <ul>
      <li v-for="(v, i) in SongSheet" :key="i">
        <div class="searchF_a"><span class="iconfont icon-bofang"></span></div>
        <div class="searchF_b">
          <router-link :to="`/songlist/${v.id}`"><img :src="v.coverImgUrl" /></router-link>
        </div>
        <div class="searchF_c">
          <router-link :to="`/songlist/${v.id}`">{{ v.name }}</router-link>
        </div>
        <div class="searchF_d">
          <span>{{ v.trackCount }}首</span>
        </div>
        <div class="searchF_e">
          by&nbsp;<router-link to="#">{{ v.creator.nickname }}</router-link>
        </div>
        <div class="searchF_f">
          收藏：<span>{{ changenum(v.bookCount) }}</span>
        </div>
        <div class="searchF_g">
          收听：<span>{{ changenum(v.playCount) }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      keyword: "",
      type: "",
      SongSheet: "",
    };
  },
  created() {
    this.keyword = this.$route.params.value;
    this.type = this.$router.history.current.name;
    this.getData();
  },
  methods: {
    //   获取单曲数据
    getData() {
      axios
        .get(
          `http://127.0.0.1:3000/cloudsearch?keywords=${this.keyword}&type=${this.type}`
        )
        .then((res) => {
          this.SongSheet = res.data.result.playlists;
        });
    },
    // 转换成万
    changenum(e){
      if(e<10000){
        return e
      }else{
        let num = Math.floor(e/10000);
        return num+"万"
      }
    }
  },
};
</script>

<style scoped>
.searchF ul li {
  display: flex;
  align-items: center;
  font-size: 12px;
  padding: 5px 0;
}
.searchF ul li:nth-child(even) {
  background-color: #f7f7f7;
}
.searchF .searchF_a {
  flex: 1;
  text-align: center;
  font-size: 22px;
}
.searchF .searchF_a span {
  font-size: 22px;
  color: #b3b3b3;
}
.searchF .searchF_b {
  flex: 1;
}
.searchF .searchF_b img {
  width: 50px;
  height: 50px;
}
.searchF .searchF_c {
  flex: 7;
  padding: 0 20px;
  
}
.searchF .searchF_c a:hover {
  text-decoration: underline;
}
.searchF .searchF_d {
  flex: 1;
  color: #999999;
}
.searchF .searchF_e {
  flex: 3;
  color: #999999;
}
.searchF .searchF_e a:hover {
  text-decoration: underline;
}
.searchF .searchF_f {
  flex: 2;
  color: #999999;
}
.searchF .searchF_g {
  flex: 2;
  color: #999999;
}
</style>